<template>
  <div class="collunList">
    <ul>
      <li v-for="(item) in list" :key="item.id">
        <div class="imgContainer">
          <!-- <img :src="item.avatar" :alt="item.title"> -->
          <img :src="ctx.$fnc.getImgUrl(item.avatar)" :alt="item.title">
        </div>
        
        <h5>{{item.title}}</h5>
        <p>{{item.description}}</p>
        <router-link class="defaultBtn plain" :to="'/columnDetail?id='+item.id">进入专栏</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent,PropType,getCurrentInstance } from 'vue'
export interface ColumnProps{
  id:number;
  title:string;
  avatar:string;
  description:string
}
const instance = getCurrentInstance()
// console.log('whaytd',instance)
export default defineComponent({
  name:'ColumnList',
  props:{
    list:{
      // Array 是一个构造函数  是没有办法直接断言成一个接口类型  需要使用 PropType 包装成一个泛型来使用
      type:Array as PropType<ColumnProps[]>,
      required:true  // 必须要传递
    }
  },
  setup(props,context){
    const res:any = getCurrentInstance()
    const ctx = res.ctx
    // console.log('data',res)
    return {
      ctx
    }
  }
})
</script>

<style lang="less" scoped>
.collunList{
  width: 85%;
  // background-color: saddlebrown;
  margin: 0 auto;
  >ul{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    list-style: none;
    gap: 30px;
    >li{
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #ccc;
      padding: 30px 10px;
      box-shadow: 0 0 5px #ccc;
      .imgContainer{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        >img{
          width: 100%;
          height: 100%;
          transition: all ease-in-out .3s;
        }
        &:hover >img{
          transform: scale(1.5);
        }
      }
      h5{
        font-weight: bold;
        margin: 10px 0;
      }
      p{
        margin-bottom: 20px;
      }
      // >a{
      //   // margin-top: 20px;
      //   border: 1px solid #337ab7;
      //   padding: 2px 10px;
      //   border-radius: 5px;
      //   // font-weight: bold;
      // }
    }
  }
}
</style>